includeDynamicCSS('./resources/NP2AS01.css');
includeDynamicCSS('./resources/NP2AS02.css');

function includeDynamicCSS(filename) {
    var cssReference = document.createElement("link");
	cssReference.setAttribute("rel", "stylesheet");
	cssReference.setAttribute("type", "text/css");
	var newFilename;
	if(isMobileDevice()) {
		if(isLandscapeMode()) {
			newFilename = filename.replace('.css','_mobile.css');
		} else {
			newFilename = filename.replace('.css','_mobile_portrait.css');
		}
		setMobileViewport();
	} else {
		newFilename = filename;
	}	
	cssReference.setAttribute("href", newFilename);
	document.getElementsByTagName("head")[0].appendChild(cssReference);
	
	var supportsOrientationChange = "onorientationchange" in window, orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
	window.addEventListener(orientationEvent, function() {includeDynamicCSS(filename)}); 
}

function setMobileViewport() {
	var viewportContent;
	if(isLandscapeMode()) {
		viewportContent = 'width=device-width, initial-scale=1.0';	
	} else {
		viewportContent = 'width=device-width, initial-scale=0.6';	
	}

	var viewport = document.querySelector('meta[name=viewport]');
	if (viewport === null) {
	  var head = document.getElementsByTagName('head')[0];
	  viewport = document.createElement('meta');
	  viewport.setAttribute('name', 'viewport');
	  head.appendChild(viewport);
	}
	viewport.setAttribute('content', viewportContent);
}